<template>
  <div class="pageSet">
    <div class="setBox">
      <p class="title">banner图设置</p>
      <img v-if="bannerUrl" :src="bannerUrl" class="avatar">
      <!-- v-on:click="uploadImage()" -->
      <div class="el-icon-plus avatar-uploader-icon">
      </div>
      <div class="btn">
        <el-button type="primary" size="mini" :disabled="bannerUrl==''||bannerUrl===null">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import elementUIFun from "@/components/js/elementUIFun";
export default {
  data() {
    return {
      bannerUrl: ""
    };
  }

  //上传图片
  // uploadImage: function() {
  //   let t = this;
  //   DingTalkPC.biz.util.uploadImage({
  //     multiple: false, //是否多选，默认false
  //     max: 1, //最多可选个数
  //     onSuccess: function(result) {
  //       console.log(result);
  //       let img = new Image();
  //       img.src = result[0];
  //       t.bannerUrl = result[0];
  //       img.onload = function() {
  //         if (img.width != 750 || img.height != 370) {
  //           t.$message({
  //             message: "建议上传的图片规格750*370",
  //             type: "warning"
  //           });
  //         }
  //       };
  //     },
  //     onFail: function(err) {}
  //   });
  // }
};
</script>

<style scoped>
.setBox {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 0 26px 26px;
  margin-bottom: 10px;
}
.title {
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e4;
}
.picture {
  display: inline-block;
}
.avatar-uploader-icon {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 178px;
  vertical-align: top;
  display: inline-block;
  margin-right: 10px;
}
.btn {
  margin-top: 10px;
}
</style>
